import React, { useEffect, useState } from 'react'
import RadioButtonUncheckedIcon from '@material-ui/icons/RadioButtonUnchecked';
import CheckCircleIcon from '@material-ui/icons/CheckCircle';
import DoneIcon from '@material-ui/icons/Done';
import WarningIcon from '@material-ui/icons/Warning';
import { connect } from 'react-redux'
import { alertDispatch } from '@/utils'
import './select.less'
import { Check } from '@material-ui/icons';
import { sendAnswerApi } from '@/Api'
function Select(props) {
    const [isShow, setIsShow] = useState(false)
    // 确认是否作答
    const [isSubmit, setIsSubmit] = useState(false)
    // 判断是否正确
    const [isAnswerRight, setIsAnswerRight] = useState(false)
    // const [value, setValue] = useState('')
    const [optionContent, setOptionContent] = useState([])

    // 提交的方法
    const submitAnswer = () => {
        // 获取用户填写的答案
        const userAnswer = optionContent.filter(e => e.checked).map(e => e.key).toString()
        // 如果用户没有勾选就弹框提示
        if (!userAnswer) return props.error('请给出你的选项')
        // 拿到参考答案
        const answer = props.data.answer
        // 如果用户答案和题库答案相同控制弹框的输出
        setIsAnswerRight(answer === userAnswer)
        props.success('提交成功')
        setIsShow(true)
        // 如果提交了就让是否提交成功，提交后就不能重新填写
        setIsSubmit(true)
        sendAnswerApi({
            categoryCode: props.data.categoryCode,
            actionType: "exam_test",
            userAnswer,
            actionCode: props.actionCode,
            id: props.data.id
        }).then(res => {
            // console.log(res);
        }).catch(err => {
            console.log(err);
        })
    }
    useEffect(() => {
        if (props.data) {
            const temp = JSON.parse(props.data.optionContent)
            temp.sort((a, b) => a.sort - b.sort)
            temp.forEach(e => e.checked = false)
            setOptionContent(temp);
        }
    }, [props.data.optionContent])

    // let oneArr = ['one', 'check']
    const clickToChecked = (item) => {
        if (isSubmit) return
        // 如果是单选只让一个选中
        if (props.data.questionType === 'one' || props.data.questionType === 'check') {
            // 排他
            optionContent.forEach(el => el.checked = false)
        }
        item.checked = !item.checked
        // setValue(item.key)
        // 强制替换数据
        // 在hooks里面，只有setXXX 修改的函数才能触发视图的更新
        const temp = JSON.parse(JSON.stringify(optionContent))
        setOptionContent(temp)
    }
    return (
        <div className="select">
            <div className="select-top flex" >
                <span>{props?.data?.zh}</span>
                <p>{props?.data?.title}</p>
            </div>
            <ul className="select-list">
                {
                    optionContent.map(item => {
                        return (
                            <li key={item.key} onClick={() => clickToChecked(item)}>
                                <div className="icons">
                                    <RadioButtonUncheckedIcon style={{ display: item.checked ? 'none' : 'block' }} />
                                    <CheckCircleIcon className="checked" style={{ display: item.checked ? 'block' : 'none' }} />
                                </div>
                                <div className="answer">
                                    {item.key}. {item.value}
                                </div>
                            </li>
                        )
                    })
                }
            </ul>
            <div className="result">
                <div className="sure-btn" onClick={submitAnswer}>
                    确认
                </div>
                <div className="sure-result" style={{ display: isSubmit ? 'block' : 'none' }}>
                    <div className="right " style={{ display: isAnswerRight ? 'block' : 'none' }}>
                        <DoneIcon />回答正确
                    </div>
                    <div className="wrong " style={{ display: isAnswerRight ? 'none' : 'block' }}>
                        <WarningIcon />回答错误
                    </div>

                </div>
                <div className={["answer", isShow ? '' : 'hide'].join(' ')}>
                    正确答案是:{props?.data.answer}
                </div>
            </div>
        </div>
    )
}
export default connect(null, alertDispatch)(Select)